<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div style="height: 3003px;">div</div>
  <script>
    // 事件类型的种类：
    //     一、鼠标事件（可以绑定在任意的元素节点上）
    //         click      单击
    //         dblclick   双击
    //         mousemove  鼠标移动（会不停的触发）
    //         mousedown  鼠标按下
    //         mouseup    鼠标抬起
    //         【注】经过子节点会重复触发。
    //         mouseover  鼠标移入 
    //         mouseout   鼠标移出
    //         【注】经过子节点不会重复触发。IE8以后才有。
    //         mouseenter 鼠标移入
    //         mouseleave 鼠标移出

    //     二、键盘事件（表单元素，全局window）
    //         keydown    键盘按下（如果按下不放手，会一直触发）
    //         keyup      键盘抬起

    //         keypress   键盘按下（只支持字符键）

    //     三、HTML事件
    //         1、window事件
    //             load    当页面加载完成以后会触发
    //             unload  当页面解构的时候触发(刷新页面，关闭当前页面)  IE浏览器兼容
    //             scroll  页面滚动
    //             resize  窗口大小发生变化的时候触发

    //         2、表单事件
    //             blur   失去焦点
    //             focus  获取焦点
    //             select 当我们在输入框内选中文本的时候触发
    //             change 当我们对输入框的文本进行修改并且失去焦点的时候
    //         【注】必须添加在form元素上
    //             submit 当我们点击submit上的按钮才能触发
    //             reset  当我们点击reset上的按钮才能触发
    // 事件绑定：
    //     元素节点.on + 事件类型 = 匿名函数;
    //     【注】系统会在事件绑定一旦完成的时候，生成一个事件对象。

    //     【注】触发事件的时候，系统会自动去调用事件绑定的函数。将事件对象当做第一个参数传入。
    var i = 0
    window.onresize = function() {
      document.title = i++
    }
  </script>
</body>
</html>